<template>
	<view>
		<uni-titles :title="'个人中心'" :backicon="false"></uni-titles>
		<u--image :mode="'aspectFill'" :src="bgsrc" width="100%" height="300rpx"></u--image>
		<view class="photobox">
			<u--image :mode="'aspectFill'" :src="photobg" width="100%" height="260rpx" :radius="'30rpx'"></u--image>
			<view class="avatarbox">
				<template v-if="islogin">
					<view class="imgbox"><u--image class="avatar" :mode="'aspectFill'" :src="avatar" width="104rpx" height="104rpx" :radius="'52rpx'"></u--image></view>
					<view class="name fs-30 mar-top14">普鲁斯·张三</view>
					<view class="tel fs-24 mar-top14">12563568925</view>
				</template>
				<template v-else>
					<view class="text1 fs-28">立即登录开启农事操作吧</view>
					<u-button @click="gologin" class="gologin" color="#07C160">立即登录</u-button>
				</template>
			</view>
		</view>
		<view class="btnbox" v-if="islogin">
			<u-button color="#64C533">登录其他账号</u-button>
			<view class="mar-top44"><u-button color="#C9C9C9" @click="exit">退出</u-button></view>
		</view>
		<view class="vtext" v-if="islogin">V 1.0.1</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			islogin: false,
			bgsrc:
				'',
			photobg:
				'',
			avatar:
				''
		};
	},
	methods: {
		gologin() {
			this.islogin = true;
		},
		exit() {
			this.islogin = false;
		}
	}
};
</script>

<style lang="scss">
page {
	height: calc(100vh - 100rpx);
	position: relative;
	background: #f6f6f6;
}
.photobox {
	margin: -136rpx 30rpx 0 30rpx;
	position: relative;
	.avatarbox {
		position: absolute;
		top: 28rpx;
		left: 50%;
		transform: translate(-50%);
		text-align: center;
		.imgbox {
			display: inline-block;
			width: 104rpx;
		}
		.name {
			color: #333;
			font-family: SimHei;
		}
		.tel {
			color: #666;
		}
	}
}
.btnbox {
	margin: 157rpx 124rpx 0 124rpx;
}
.vtext {
	color: #b7b7b7;
	font-family: SimHei;
	text-align: center;
	position: absolute;
	bottom: 30rpx;
	width: 100%;
}
.text1 {
	color: #333;
	margin-top: 16rpx;
}
.gologin {
	margin-top: 38rpx;
}
</style>
